/*
 * project: circleplayer
 * http://www.jplayer.org
 *
 * copyright (c) 2011 happyworm ltd
 *
 * author: silvia benvenuti
 * edited by: mark j panaghiston
 * date: 6th may 2011
 * artwork inspired by: http://forrst.com/posts/untitled-cjz
 */
.music_box{height:400px;box-sizing:border-box;padding:30px 0;width:1200px;margin:100px auto;background:red;}
.loadsong{font-size:15px;width:80px;background:red;-webkit-border-radius: 6px; -moz-border-radius:6px;-o-border-radius:6px; color:#fff; text-align: center;padding:2px 0;margin:0px 0 10px;display:block;}
.loadsong:hover{color:#fff;}
.box_left{width:400px;float:left;height:340px;}
.box_right{
	width:800px;
	float:left;
	height:340px;
	border-left:1px dotted #fff;
	box-sizing: border-box;
	padding:20px 10px;
	overflow:hidden;
}
.box_right_content{
	width:100%;
	height:100%;
	overflow:auto;

}
/* 设置滚动条的样式 */
       ::-webkit-scrollbar { width:15px; }
        /* 滚动槽 */
       ::-webkit-scrollbar-track {
            /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);*/
            background: rgba(0,0,0,0.2);       
            border-radius: 0px;
        }
        /* 滚动条滑块*/
       ::-webkit-scrollbar-thumb {
            border-radius: 10px;      
            background: rgba(0,0,0,0.2);      
            /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
        }
.box_right p{color:#fff;font-size:20px;line-height:35px;text-align: center;}       
.prototype-wrapper {
	width:200px;
	margin: 0 auto;
}
.cp-container {
	position: relative;
	width: 104px; /* 200 - (2 * 48) */
	height: 104px;
	/*background:  0 0 no-repeat;*/
	padding: 48px;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.cp-container :focus {
	border:none; 
	outline:0;
}

.cp-buffer-1,
.cp-buffer-2,
.cp-progress-1,
.cp-progress-2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 104px;
	height: 104px;
	clip:rect(0px,52px,104px,0px);

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

.cp-buffer-1,
.cp-buffer-2 {
	/*background:  0 0 no-repeat;*/
}     


/* fallback for .progress
 * (24 steps starting from 1hr filled progress, decrease second value by 104px for next step)
 * (it needs the container selector to work. or use div)
 */ 

.cp-container .cp-fallback {
	/*background:  no-repeat;*/
	background-position: 0 104px; 
}

.cp-progress-1,
.cp-progress-2 {
	/*background:  0 0 no-repeat;*/
} 

.cp-buffer-holder,
.cp-progress-holder,
.cp-circle-control {
	position:absolute;
	width:104px;
	height:104px;
} 

.cp-circle-control {
	cursor:pointer;
}

.cp-buffer-holder,
.cp-progress-holder {
	clip:rect(0px,104px,104px,52px);
	display:none;
}


/* this is needed when progress is greater than 50% or for fallback */

.cp-buffer-holder.cp-gt50,
.cp-progress-holder.cp-gt50,
.cp-progress.cp-fallback{
	clip:rect(auto, auto, auto, auto);
}  

.cp-controls {
	margin:0;
	padding: 26px;
}

.cp-controls li{
	list-style-type:none;
	display: block;

	/*ie fix*/  
	position:absolute;
	margin:36px -40px;
}

.cp-controls li a{
	position: relative;
	display: block;
	width:131px;
	height:131px;
	text-indent:-9999px;
	z-index:1;      

}

.cp-controls .cp-play {
	background:  no-repeat;
	background-size: 100%;
}

.cp-controls .cp-pause {
	background: no-repeat;
	background-size: 100%;
}


.cp-jplayer {
	width: 0;
	height: 0; 
}