#visual{
	margin: 0px;
	padding: 0px;
}
#visual_img {
	background:url(../img/space.jpg);	
    width: 101%;
    height: 100%;
    position: absolute;
    left: -1px;
     -webkit-filter: brightness(0.8);
	
}
body{
	overflow-x: hidden;
}
body,
dl,
dt,
dd,
p,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
select,
fieldset,
input,
button,
textarea,
blockquote {
	margin: 0;
	padding: 0;
}
#head{
	width: 100%;
	height: 54px;
	position: fixed;
	top: 0;
	left: 0;
	background: #d33a31;
	opacity: 1;
}

#logo img{
	width: 200px;
	height: 50px;
	position: absolute;
	top: 2px;
	left: 10px;
}

#catalog{
	color: whitesmoke;
	position: absolute;
	left: 1210px;
	top: 2px;
	
}
#catalog li{
	text-align: center;
	list-style-type: none;
	float: left;
	height: 50px;
	line-height: 50px;
	padding-left: 40px;
	transition-duration: 0.5s;
	opacity:0.6;
}
#catalog li:hover{
	opacity:1;
	transition-duration: 0.5s;
}
#catalog a{
	color: whitesmoke;
	text-decoration: none;
	font-size: 12px;
	
	font-family: "microsoft yahei";
}

#myCanvas{
	position: absolute;
	top: 200px;
	left: 580px;
	opacity: 0.8;
}
#myCanvas1{
	position: absolute;
	top: 110px;
	left: 485px;
	opacity: 0.8;
	
}
#wavejs{
	position: absolute;
	top:550px ;
	left: 735px;
	color: white;
	font-family: "arial, helvetica, sans-serif";
	
}

#content{
	width: 48px;
	height: 48px;
	position: absolute;
	left: 0px;
	top: 0px;
	background: url(http://osuultm42.bkt.clouddn.com/NuupF7gw_aZxPcJzaOHNvA%253D%253D%252F1394180750101093.jpg) no-repeat center center;/*no-repeat center 50% */
	background-size:cover;
	-webkit-filter: blur(0px);
	opacity: 1;
	
	/*-webkit-filter: blur(0px);这个模糊特效把content上的全给模糊了，我要的是只模糊背景图片，这个问题的解决方案交给JS*/ 
	transition-duration: 0.3s;
}
#content:hover{
	-webkit-filter: blur(0);	
	opacity: 0.8;	
	transition-duration: 0.3s;
	transition-delay: 0.5s;
}

#unprog {
	width: 960px;
	height: 5px;
	background-color: gainsboro;
	position: absolute;
	bottom: 21px;
	left: 260px;
	border-radius: 5px;
	transition-duration: 0.2s;
}

#prog {
	width: 0px;
	height: 5px;
	background-color: #d33a31;
	float: left;
	position: absolute;
	bottom: 21px;
	left: 260px;
	border-radius: 5px;
	transition-duration: 0.2s;
}

#durationtime{
	position: absolute;
	bottom: 17px;
	left: 1235px;
	color: #333;
	font-size: 8px;
}

#currenttime{
	position: absolute;
	bottom: 17px;
	left: 220px;
	color: #333;
	font-size: 8px;
}

#pre,
#next {
	width: 27px;
	height: 27px;
	position: absolute;
	top: 11px;
}

#pre {
	left: 68px;
}

#playpause {
	width: 40px;
	height: 40px;
	position: absolute;
	left: 115px;
	top:5px;
}

#next {
	left: 175px;
}

#pre,
#next,
#playpause {
	background-color: transparent;
	opacity: 1;
	transition-duration: 0s;
}

#pre:hover,
#next:hover,
#playpause:hover {
	opacity: 0.7;
	transition-duration: 0s;
}

#songifo{
	width:100%;
	height: 15px;
	font-size: 8px;
	font-family:verdana,simhei,sans-serif;
	color: #333;
	position: absolute;
	top: -2px;
	line-height: 25px;
	text-align: center;
	
		
}

#vol{
	width: 35px;
	height: 25px;
	position: absolute;
	left: 1270px;
	bottom: 11px;
	opacity: 0.5;
	transition-duration: 0.5s;
}
#vol:hover{
	opacity: 1;
	transition-duration: 0.5s;
}



#volbottom{
	width: 100px;
	height: 5px;
	background-color: gainsboro;
	position: absolute;
	
	left: 1305px;
	bottom: 21px;
	border-radius: 5px;
	transition-duration: 0.2s;
}
#voltop{
	width: 0px;
	height: 5px;
	background-color: #d33a31;
	float: left;
	position: absolute;	
	left: 1305px;
	bottom: 21px;
	border-radius: 5px;	
	transition-duration: 0.2s;
	
}

#download{
	width: 30px;
	height: 20px;
	position: absolute;
	left: 1425px;
	bottom: 14px;
	transition-duration: 0.3s;
	opacity: 0.5;
}
#download:hover{

	opacity: 1;
	transition-duration: 0.3s;
}
#musicbox{
	width: 100%;
	height: 48px;
	/*background:#2b2b2b;灰色主题*/
	background: whitesmoke;
	position: fixed;
	bottom: 0px;
}