body{
	margin:0; 
	font-family:"宋体";
}
ul li{
	list-style:none; 
}
*{
	cursor:default;
}
.zuo{
	color:white;
	width:360px;
	position: absolute;
	top:0;
	bottom:0;
	background:#383836;
}
.zuo ul li{
	font-size: 18px;
}
.zuo .title{
	padding:15px 30px;
	color:white;
	font-size:30px;
	font-weight:bolder;
	border-bottom:1px solid #111;  
}
.zuo .title span:last-child{
	float: right;
}
.zuo input{
	border:none;
	outline: none;
	background:rgba(0,0,0,0);
	color:white;
	font-size:14px; 
    display:inline;
    font-weight:bold; 
    position: absolute;
    left:50px;
    top:12px;
}

.zuo ul{
	margin:0;
	padding:0;
	
}
.zuo ul li{
    padding:10px;
    border-bottom:1px solid #111;
    position: relative;
}
.zuo ul li span:first-child{
	display: inline-block;
	padding:10px;
	border-radius: 50%;
}
.zuo ul li .color{
    background:red;
}
.you{
	position: absolute;
	left:390px;
	right:0;
	top:0;
	bottom:0;
	background:#eee; 
    padding:40px;
    font-size:20px; 
}
.you li span{
	display: inline-block;
}
.you input{
	font-size:24px;
	display: inline-block;
}
.you ul li{
	line-height:40px; 
}
.youli input{
	width:80%;
	height:40px;  
}
.delete{
	border: none;
	font-size:24px;
	float:right; 
}
button.delete{
	background:none; 
	border:none;
}
input.aa{
	width:225px;
	background:none; 
	border:none;
}
.yuandian{
	width:20px;
	height:20px;
	display: inline-block;
	margin-right:10px;
	border-radius:50%; 

}
.shixin{
	width:20px;
	height:20px;
	border:4px solid orange;
	border-radius:50%; 
}
.kongxin{
	width:20px;
	height:20px;
	border-radius:50%;
	border:4px solid white;
}

div.you{
	background: none;
}

.blue{
	background:#14aefa;
	color:#14aefa;
}
.green{
	background:#65d72d;
	color:#65d72d;
}
.yellow{
	background:#f7c900;
	color:#f7c900;
}
.pink{
	background:#ff3766;
	color:#ff3766;
}
.purple{
	background:purple;
	color:purple;
}
.brown{
	background:brown;
	color:brown;
}
.orange{
	background:#cb78e3;
	color:#cb78e3;
}
.active{
	background:#222;
}