@CHARSET "UTF-8";
/*
 * CSS3 of my web site
 * @author : DJEBIEN Tarik
 * @version : css 3.0
 * @Object : CSS Style for HTML5 music player component
 * @Browsers : Firefox, Safari, Chrome
 */

#musicPlayerComponentWrapper
{
	background: url("../../img/design/musicPlayerComponent_bg.jpg") center no-repeat fixed;
	background-position: 0px 0px;
    background-repeat: repeat-x;
	animation: animatedBackground 150s linear infinite;
    -ms-animation: animatedBackground 150s linear infinite;
    -moz-animation: animatedBackground 150s linear infinite;
    -webkit-animation: animatedBackground 150s linear infinite;
	box-shadow: 1px 1px 0 rgba(0,0,0,.1), 0 -1px 0 rgba(0,0,0,.07);
	border-radius: 4px 4px 0px 0px;
}
 
#musicPlayerComponent div#divPlayer {
	padding: 20px;
	margin: 15px;
	
}

#musicPlayerComponent #divPlayer button {
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
	background: -moz-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
	border: 1px solid #aaa;
	color: #444;
	margin-bottom: 0px;
	min-width: 4em;
	font-size: 12px;
	cursor: pointer;
	opacity: 0.90;
}

#musicPlayerComponent #divPlayer button:hover {
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
	background: #ebebeb -moz-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
	border-color: #999;
	color: #222;
}

#musicPlayerComponent #divPlayer #progressBarControl {
	width: 90%;
	height: 15px;
	border: 1px solid #aaa;
	border-radius: 2px;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	margin-bottom: 5px;
	display: inline-block;
	cursor: pointer;
}

#musicPlayerComponent #divPlayer #progressBar {
	width: 0%;
	height: 15px;
	text-align: right;
	line-height: 12px;
	font-size: 13px;
	white-space: nowrap;
	cursor: pointer;
}

#musicPlayerComponent #divPlayer #progressTime {
	font-size: 1.6em;
	color: white;
}

#musicPlayerComponent #divPlayer .volume {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
}

#musicPlayerComponent #divPlayer .volume a {
	display: inline-block;
	background: #ebebeb;
	width: 4px;
	vertical-align: bottom;
	margin-left: 10px;
	position: absolute;
	bottom: 0;	
}

#displayButton {
	width: 60px;
	height: 50px;
	display: block;
	margin: auto;
	padding: 2px;
	top: 60px;
	left: 30px;
	position: absolute;
	z-index: 2;
}

#musicPlayerComponent #divPlayer .stick1 { height: 3px;  left: 0px; }
#musicPlayerComponent #divPlayer .stick2 { height: 6px; left: 5px; }
#musicPlayerComponent #divPlayer .stick3 { height: 9px; left: 10px; }
#musicPlayerComponent #divPlayer .stick4 { height: 12px; left: 15px; }
#musicPlayerComponent #divPlayer .stick5 { height: 15px; left: 20px; }
#musicPlayerComponent #divPlayer .stick6 { height: 18px;  left: 25px; }
#musicPlayerComponent #divPlayer .stick7 { height: 21px; left: 30px; }
#musicPlayerComponent #divPlayer .stick8 { height: 24px; left: 35px; }
#musicPlayerComponent #divPlayer .stick9 { height: 27px; left: 40px; }
#musicPlayerComponent #divPlayer .stick10 { height: 30px; left: 45px; }