.trackbar{ background:#fff; height:50px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-family: adobe-clean,sans-serif;
}
.trackbar:nth-child(even) { background:#EEE;background: rgba(230,240,192,0.4);}
.playbutton{ opacity:.8; display:block; float:left; width:24px; height:24px; margin:10px 0px 0px 10px; background:url(images/ak_playbtn.png) no-repeat; border:none; cursor:pointer; outline:none; 
border-radius:4px;
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
        inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
        inset 0 3px rgba(255,255,255,0.2), /* Top Light Shadow */
        inset 0 3px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
        inset 0 -15px 30px rgba(0,0,0,0.3),inset 0px 0px 85px rgba(255,255,255,.1); /* Dark Background */
}
.playbutton:hover{ opacity:1; }
.nextbutton{ opacity:.8; display:block; float:left; width:24px; height:24px; margin:10px 0px 0px 10px; background:url(images/ak_playbtn.png) no-repeat; border:none; cursor:pointer; outline:none; 
border-radius:4px;
    box-shadow: 
        0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
        inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
        inset 0 3px rgba(255,255,255,0.2), /* Top Light Shadow */
        inset 0 3px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
        inset 0 -15px 30px rgba(0,0,0,0.3),inset 0px 0px 85px rgba(255,255,255,.1); /* Dark Background */
}
.nextbutton:hover{ opacity:1; }
.trackname{ float:left; color:#000; margin:10px 0px 0px 0px; font-size:12px; font-weight:normal;width:160px;height:auto; }
.trackalbum{ float:left; color:#555; margin:0px 0px 0px 0px; font-size:12px; font-weight:normal;width:160px;height:auto; }
.trackartist{ float:left; color:#ddd; margin:0px 0px 0px 0px; font-size:12px; font-weight:normal;width:200px;height:auto; }
.trackyear{ float:left; color:#fff; margin:0px 0px 0px 0px; font-size:14px; font-weight:normal;width:200px;height:20px; }
.nameart:nth-child(2n){color:white;}

.timage
{
    float:left;
}
.button{
	font-family: 'PT Sans', arial, serif;
	font-family: adobe-clean,sans-serif;
	color:#ffffff;
	text-align:center;
	font-size:1em;
	font-weight:bold;
	padding:4px;
	
	text-shadow: /* Simulating Text Stroke */
        -1px -1px 0 #000, 
        1px -1px 0 #000, 
        -1px 1px 0 #000, 
        1px 1px 0 #000;
	
	border: 1px solid rgba(0,0,0,0.5);
	border-bottom: 3px solid rgba(0,0,0,0.5);
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	
	background: rgba(0,0,0,0.25);

    -o-box-shadow: 
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);

    -webkit-box-shadow: 
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);

    -moz-box-shadow:
        0 2px 8px rgba(0,0,0,0.5),
        inset 0 1px rgba(255,255,255,0.3),
        inset 0 10px rgba(255,255,255,0.2),
        inset 0 10px 20px rgba(255,255,255,0.25),
        inset 0 -15px 30px rgba(0,0,0,0.3);
	
	box-shadow: 
        0 2px 8px rgba(0,0,0,0.5), /* Exterior Shadow */
        inset 0 1px rgba(255,255,255,0.3), /* Top light Line */
        inset 0 10px rgba(255,255,255,0.2), /* Top Light Shadow */
        inset 0 10px 20px rgba(255,255,255,0.25), /* Sides Light Shadow */
        inset 0 -15px 30px rgba(0,0,0,0.3),inset 0px 0px 85px rgba(255,255,255,.1); /* Dark Background */

	//margin-top: 40px;
	display: inline-block;
	text-decoration: none;
	margin-left:-1px;
}
.mtitle
{
    float:left;
    color:rgb(255,255,255);
    width:120px;
    text-shadow: -1px -1px 0px rgba(0,0,0,0.3), 1px 1px 0px rgba(0,0,0,0.8);
    border-radius: 0px 3px 3px 0px;
    
    text-shadow: 1px 1.7px 2px #000;
}

html
{
background:radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent), url('bokeh.jpg') repeat center center fixed;
}
.baaar
{margin: 10px;
    z-index:999;
    position:fixed;
    height: 120px;
  width: 320px;
  background: rgba(230,240,255,0.4);
  background: rgba(0,0,0,0.7);
  background: rgba(0,0,0,1);
  border: 2px dashed transparent;
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.15);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  border: 2px ridge white;
  height:90px;
  height:118px;
  color:white;
  text-shadow: 1px 1.7px 2px #000;
}
.trackbar {
  float: left;
  margin: 10px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  text-shadow: 0px 1px 2px rgba(0,0,0,0.25);
  /*line-height: 5em;*/
  position: relative;
  height: 120px;
  width: 320px;
  background: rgba(230,240,255,0.4);
  border: 2px dashed transparent;
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.15);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  border: 2px ridge white;
  height:112px;
}

.trackbar:before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 100%;
  top: 0; right: 0; left: 0;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.trackbar:hover { box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.25); }

.trackbar.over { 
  border: 2px dashed rgba(0,0,0,0.2); 
  background-color: rgba(0,0,0,0.05); 
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.15);
}

.trackbar:active {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
}
.button2{
    font-family: 'PT Sans', arial, serif;
    font-family: adobe-clean,sans-serif;
	color:#ffffff;
	text-align:center;
	font-size:1em;
	
	padding:10px;
	
	text-shadow: /* Simulating Text Stroke */
        -1px -1px 0 #000, 
        1px -1px 0 #000, 
        -1px 1px 0 #000, 
        1px 1px 0 #000;
        margin-top: 30px;
	display: inline-block;
	text-decoration: none;
	margin-left:-1px;
}



canvas{ width:320px; height:30px; background:#002D3C; background:transparent; float:left; }


button{ border:none; cursor:pointer; outline:none; }
input{ outline:none; }
button#playpausebtn{
	background:url(images/pause.png) no-repeat;
	width:12px;
	height:14px;
}
button#mutebtn{
	background:url(images/speaker.png) no-repeat;
	width:5px;
	height:14px;
}
input#seekslider{
	width: 200px;
}
input#volumeslider{
	width: 70px;
}
input[type='range'] {
    -webkit-appearance: none !important;
	margin:0px;
	padding:0px;
    background: #000;
    background: rgba(0,0,0,0.3);
    height:13px;
	border-bottom:#333 1px solid;
}
input[type='range']::-ms-fill-lower  {
	background:#000;
}
input[type='range']::-ms-fill-upper  {
	background:#000;
}
input[type='range']::-moz-range-track {
	border:none;
    background: #000;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
	border-radius:100%;
	cursor:pointer;
}
input[type='range']::-moz-range-thumb {
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
	border-radius:100%;
	cursor:pointer;
}
input[type='range']::-ms-thumb {
    -webkit-appearance: none !important;
    background: radial-gradient(#FFF, #333);
    height:11px;
    width:11px;
	border-radius:100%;
	cursor:pointer;
}
audio{  width:250px; background:#000; float:left;  }
.main {
    height: 100vh;
    background-color: green;
    display:block;
}



/* Search button */

#myInput {
  /*background-image: url('searchicon.png');
  background-repeat: no-repeat;
  padding-left: 20px;
  width: 100%;*/
  
}