@charset "utf-8"; /* CSS Document */

.gradient {
	border: 1px solid #6f2c54;

	background: #6f2c54; /* Old browsers */
    background: -webkit-linear-gradient(top, white 0%, white 31%, white 55%, white 83%, white 100%, white 100%, white 100%);

	background: -moz-linear-gradient(top, white 0%, white 31%, white 55%, white 83%, white 100%, white 100%, white 100%);
	background: -o-linear-gradient(top, white 0%, white 31%, white 55%, white 83%, white 100%, white 100%, white 100%);
	background: -ms-linear-gradient(top, white 0%, white 31%, white 55%, white 83%, white 100%, white 100%, white 100%);
	background: linear-gradient(top, white 0%, white 31%, white 55%, white 83%, white 100%, white 100%, white 100%); /* W3C */
    -image  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='6f2c54', endColorstr='white',GradientType=0 ); /* IE6-9 */
}

.container {
	-webkit-transition: all .7s ease;
	-moz-transition: all .7s ease;
	-o-transition: all .7s ease;
	-ms-transition: all .7s ease;
	transition: all .7s ease;
	position: absolute;
	width: 427px;
	height: 70px;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	left: 29%;
	margin: -214px 0px 0px -214px;
	padding: 10px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


.containerLarge {
	height: 427px;
}

.cover {
	width: 398px;
	height: 10px;
	border: 1px solid white;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.coverLarge {
	opacity: 0;
	height: 398px;
	
	-webkit-transition: opacity .7s ease;
	-moz-transition: opacity .7s ease;
	-o-transition: opacity .7s ease;
	-ms-transition: opacity .7s ease;
	transition: opacity .7s ease;

	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}


.player {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	position: absolute;
	width: 300px;
	bottom: 10px;
	width: 95%;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 5px;
}

.button {
	display: block;
	width: 34px;
	height: 34px;
	background-image:url(../images/sprite.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 5px;
}

#play {
	background-position: 6px 5px;
}

#pause {
	background-position: -32px 5px;
}

#mute {
	background-position: -63px 5px;
}

#muted {
	background-position: -106px 5px;
}

input[type="range"] {
	width: 250px;
	margin-top: -5px;
}

#close {
	float: right;
	background-position: -146px 5px;
}

.volume {
	position: absolute;
	height: 100px;
	width: 34px;
	border: 1px solid black;
	background-color: #6f2c54;
	top: -97px;
}

input{
	display:none\9!important;
}
input[type="range"] {
	-webkit-appearance: none;
	border: 1px solid white;
	position: absolute;
	top: 18px;
	display: block;
	width: 63%;
	height: 15px;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #a87794;
	left: 90px;
}

input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border:1px solid white;

	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #6f2c54; /* Old browsers */
    background: -webkit-linear-gradient(top, #6f2c54 0%, #6f2c54 13%, #6f2c54 33%, #6f2c54 47%, #6f2c54 80%, #6f2c54 100%);

	background: -moz-linear-gradient(top, #6f2c54 0%, #6f2c54 13%, #6f2c54 33%, #6f2c54 47%, #6f2c54 80%, #6f2c54 100%);
	background: -o-linear-gradient(top, #6f2c54 0%, #6f2c54 13%, #6f2c54 33%, #6f2c54 47%, #6f2c54 80%, #6f2c54 100%);
	background: linear-gradient(top, #6f2c54 0%, #6f2c54 13%, #6f2c54 33%, #6f2c54 47%, #6f2c54 80%, #6f2c54 100%); /* W3C */
}