*{margin: 0;padding: 0;}
body{
	background: #e9eaed;
	// font-family: verdana;
	color: #555;
	position: relative;
	font-family:  Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
	color: #363636;
	font-size: 100%;
	cursor: default;
	overflow: hidden;
	-webkit-user-select: none;
}
.left{
	float: left!important;
	margin-right: 10px;
}
.rigth{
	float: right!important;
}
.clear{
	clear: both;
}
.mt{margin-top: 10px!important;}
.ml{margin-left: 10px!important;}
.mb{margin-bottom: 10px!important;}
.mr{margin-right: 10px!important;}
.none{display: none!important;}
a{cursor: pointer;text-decoration: none;}
a:hover{background: rgba(0, 0, 0, 0.11);}
#menu{	
	background: #31394a;
	position: fixed;
	top: 0;
	left: 0;
	width: 80%;
	height: 100%;
	z-index: 3;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	transition: all 600ms;
	-moz-transition: all 600ms;
	-webkit-transition: all 600ms;
	h2{
		padding: 5px 10px;
		background: #2F3341;
		color: #C4C4C4;
		font-size: 15px;
		text-align: left;
	}
	ul{
		list-style: none;
		li{
			display: block;
			a{
				display: block;
				color: #ccc;
				padding: 10px;
				text-shadow: 1px 1px 0px #000;
				text-decoration: none;
				font-size: 15px;
			}
		}
	}
}
ul.abc,ul.genero{
	display: block;
	text-align: center;
	li{
		display: inline-block!important;
	}
}
ul.social{
	display: block;
	text-align: center;
	a{
		font-size: 30px;
		color: #fff;
		text-decoration: none;
		display: inline-block;
		padding:10px;

	}
}
#container{
	position: relative;
	display: block;
	top: 0;
	z-index: 10;
	background: #e9eaed;
	height: 100%;
	width: 100%;
	transition: -moz-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
	-moz-transition: -moz-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
	#header{
		color: #fff;
		width: 100%;
		background: #3b5998;
		height: 50px;
		position: fixed;
		z-index: 7;
		top: 0;
		left: 0;
		 -moz-box-shadow:    inset 0 19px 16px -9px #4063AD, inset 0 -7px 9px -6px #2546AD;
		-webkit-box-shadow:  inset 0 19px 16px -9px #4063AD, inset 0 -7px 9px -6px #2546AD;
		 box-shadow:         inset 0 19px 16px -9px #4063AD, inset 0 -7px 9px -6px #2546AD; 			
		text-align: center;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.15);
		#search{
			position: absolute;
			width: 100%;
			height: 50px;
			z-index: 14;
			background: #3b5998;
			display:none;
			-moz-box-shadow:    inset 0 19px 16px -9px #4063AD, inset 0 -7px 9px -6px #2546AD;
			-webkit-box-shadow:  inset 0 19px 16px -9px #4063AD, inset 0 -7px 9px -6px #2546AD;
			box-shadow:         inset 0 19px 16px -9px #4063AD, inset 0 -7px 9px -6px #2546AD; 			
			a.ocultar{
				position: absolute;
				top: 0;
				right: 0;
				padding: 10px 15px;
				font-size: 30px;
			}
			input[type=text]{
				width: 85%;
				margin-top: 10px;
				padding: 7px;
				border-radius: 4px;
				border:none;
				position: absolute;
				top: 0;
				left: 10px;
				display: block;

			}
			input[type=submit]{
				display: none;
			}
		}
		a.btn_menu{
			position: absolute;
		}
		a.title{
			background-image: url('/media/img/logo.png');
			width: 199px;
			height: 37px;
			display: inline-block;
			text-indent: -99999px;
			margin-top: 2px;
		}
		a.btn_menu{
			position: absolute;
			top: 0;
			left: 0;
			padding: 12.5px;
			width: 28px;
			font-size: 25px;
			color: #fff;
			text-shadow: 1px 1px 0px rgba(0, 0, 0, 0);
		}
		a.btn_search{
			position: absolute;
			top: 0;
			right: 0;
			padding: 14.5px;
			width: 24px;
			font-size: 21px;
			color: #fff;
			text-shadow: 1px 1px 0px rgba(0, 0, 0, 0);
		}
	}
	#main{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 92%;
		padding: 55px 0px 0px 0px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 0;
		h2{
			background-color: #F6F7F8;
			display: block;
			font-size: 18px;
			color: #444;
			padding: 5px;
			border: 1px solid #D3D6DB;
			em{
				background-image: url('/media/img/star.png');
				background-repeat: no-repeat;
				height: 23px;
				width: 18px;
				display: block;
				float: left;
			}
			
		}
	}
	#player{
		position: fixed;
		bottom: 0;
		width: 100%;
		// background: #3b5998;
		background-color: #F6F7F8;
		border-top: 1px solid #ccc;
		padding: 5px 0px;
		box-shadow: 0 2px 2px 0 rgba(0,0,0,0.15);
	}
}

#playlist{
	display: block;
	li.playing{
		display: block;
		a{
			background-color: #ECECEC!important;
		}
	}
	li{
		display: block;
		a{
			display: block;
			padding: 10px 20px;
			background: #FFFFFF;
			border-bottom: 1px solid #DFDFDF;
			color: #555;
			font-size: 14px;
		}
	}
}

#artistas{
	display: block;
	li{
		display: block;
		a{
			display: block;
			position: relative;
			overflow: hidden;
			padding: 5px;
			background-color: #fff;
			margin-bottom: 1px;
			.img{
				display: block;
				float: left;
				width: 60px;
				height: 55px;
				img{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			h3.artist{
				display: block;
				font-size: 14px;
				color: #555;
				padding-left: 70px;
			}
			strong.tracks{
				display: block;
				font-size: 12px;
				color: #777;
				padding-left: 70px;
				padding-top: 5px;
			}
			span.btn{
				position: absolute;
				right: 20px;
				top :20px;
				font-size: 20px;
				color: #444;
			}
		}
	}
}
.datt{
	display: block;
	padding-bottom: 10px;
	padding-left: 5px;
	text-shadow:1px 1px #fff;
	img{
		background: #fff;
		width: 100px;
		float: left;
		border-radius: 4px;
		border: 1px solid #ccc;
		padding: 4px;
		margin-right: 10px;
	}
	h1{
		display: block;
		font-size: 17px;
		// padding-left: 120px;
	}
	h3{
		// float: left;
		margin-top: 3px;	
		// padding-left: 120px;
		font-size: 12px;
	}
	p{
		font-size: 14px;
		line-height: 18px;
		// padding-left: 120px;	
	}
	.lik{
		display: block;
		text-align: center;
		background: #365E99;
		margin: 5px;
		padding: 15px 10px;
		border-radius: 4px;
		color: #fff;
		text-shadow:1px 1px 0px #000;
	}
}
.audiojsZ audio { position: absolute;
 left: -1px;
 }
.audiojsZ {
  display: block;
  overflow: hidden;
}
.audiojsZ .play-pauseZ{
  display: block;
  overflow: hidden;
  width: 120px;
  margin: 0 auto;
}

.audiojsZ p { 
  display: none;
  cursor: pointer;
  height: 57px;
  background-image: url(/media/img/repro.png);
  background-repeat: no-repeat;
  float: left;
  vertical-align: top;
  opacity: .6;
  cursor: pointer;
  -webkit-transition: opacity .150s;
  -moz-transition: opacity .150s;
  transition: opacity .150s;
}
.audiojsZ p.playZ { display: block;}
.playingZ p.playZ, .playingZ p.loadingZ{ display: none;}
.playingZ p.pauseZ { display: block;}
.loadingZ p.playZ, .loadingZ p.pauseZ{ display: none;}
.loadingZ p.loadingZ { display: block;}

.audiojsZ p.prevZ{
  display: block!important;
  width: 31px !important;
  background-position: -1px 0;
}
.audiojsZ p.prevZ:hover, .audiojsZ p.nextZ:hover, .audiojsZ p.playZ:hover, .audiojsZ p.pauseZ:hover{opacity: 1;}
.audiojsZ p.nextZ{
    display: block!important;
  width: 31px !important;
  background-position: -90px 0;
}
.audiojsZ p.playZ {
  height: 57px;
  width: 57px;
  margin: 0;
  opacity: .8;
  background-position: -32px -1px;
}
.audiojsZ p.loadingZ {
  height: 57px;
  width: 57px;
  margin: 0;
  opacity: 1;
  background-position: -32px -119px;
}
.audiojsZ p.pauseZ {
  height: 57px;
  width: 57px;
  margin: 0;
  opacity: .8;
  background-position: -32px -60px;
}

.audiojsZ .osd{
  display: block;
  overflow: hidden;
  width: 230px;
  margin: 0 auto;
  margin-top: 5px;
}
.audiojsZ .osd .playedZ{
  float: left;
  position: absolute;
  left: 15px;
}
.audiojsZ .osd .durationZ{
  float: left;
  position: absolute;
  right: 15px;
}


.audiojsZ .osd .scrubberZ {
 position: relative;
 float: left;
 width: 130px;
 background: #333;
 height: 7px;
 margin: 5px 10px;
 overflow: hidden;
 border: 1px solid #000;
border-radius: 4px;
 }
.audiojsZ .osd .progressZ { position: absolute;
 top: 0px;
 left: 0px;
 height: 14px;
 width: 0px;
 background: #000;
 z-index: 1;
 transition: width .500s;
 cursor: pointer;
 }
.audiojsZ .osd .loadedZ { position: absolute;
 top: 0px;
 left: 0px;
 height: 14px;
 width: 0px;
 background: #444;
 cursor: pointer;
 }