*{margin:0;padding:0;}
.draw_controller{margin:10px 0 0;height:50px;}
.draw_controller li a{display:block;width:30px;height:30px;}
.draw_controller li{float:left;margin:0 8px;width:30px;height:30px;background-color:#FFF;background-image:url(../images/draw.png);background-repeat:no-repeat;box-shadow:0 0 4px #49a4db;list-style:none;cursor:pointer;-webkit-transition:all .4s ease-in-out;}
.draw_controller.right li{float:right;}/*fromwzh*/
.draw_controller li:nth-child(1){background-position:0 0;}
.draw_controller li:nth-child(2){background-position:-30px 0;}
.draw_controller li:nth-child(3){background-position:-60px 0;}
.draw_controller li:nth-child(4){background-position:-90px 0;}
.draw_controller li:nth-child(5){background-position:-120px 0;}
.draw_controller li:nth-child(7){background-position:-150px 0;}
.draw_controller li:nth-child(8){background-position:-180px 0;}
.draw_controller li:nth-child(9){background-position:-210px 0;}
.draw_controller li:nth-child(10){background-position:-240px 0;}
.draw_controller li:nth-child(12){background-position:-270px 0;}
.draw_controller li:nth-child(13){background-position:-300px 0;}
.draw_controller li:nth-child(14){background-position:-330px 0;}
.draw_controller li:nth-child(15){background-position:-360px 0;}
.draw_controller li:nth-child(16){background-position:-390px 0;}
.draw_controller li:hover{background-color:#49a4db;box-shadow:0 0 4px #99bce2;}
.draw_controller li.active{background-color:#49a4db;box-shadow:0 0 4px #99bce2;}
.draw_controller li:nth-child(1).active,.draw_controller li:nth-child(1):hover{background-position:0 -30px;}
.draw_controller li:nth-child(2).active,.draw_controller li:nth-child(2):hover{background-position:-30px -30px;}
.draw_controller li:nth-child(3).active,.draw_controller li:nth-child(3):hover{background-position:-60px -30px;}
.draw_controller li:nth-child(4).active,.draw_controller li:nth-child(4):hover{background-position:-90px -30px;}
.draw_controller li:nth-child(5).active,.draw_controller li:nth-child(5):hover{background-position:-120px -30px;}
.draw_controller li:nth-child(7).active,.draw_controller li:nth-child(7):hover{background-position:-150px -30px;}
.draw_controller li:nth-child(8).active,.draw_controller li:nth-child(8):hover{background-position:-180px -30px;}
.draw_controller li:nth-child(9).active,.draw_controller li:nth-child(9):hover{background-position:-210px -30px;}
.draw_controller li:nth-child(10).active,.draw_controller li:nth-child(10):hover{background-position:-240px -30px;}
.draw_controller li:nth-child(12).active,.draw_controller li:nth-child(12):hover{background-position:-270px -30px;}
.draw_controller li:nth-child(13).active,.draw_controller li:nth-child(13):hover{background-position:-300px -30px;}
.draw_controller li:nth-child(14).active,.draw_controller li:nth-child(14):hover{background-position:-330px -30px;}
.draw_controller li:nth-child(15).active,.draw_controller li:nth-child(15):hover{background-position:-360px -30px;}
.draw_controller li:nth-child(16).active,.draw_controller li:nth-child(16):hover{background-position:-390px -30px;}
.draw_controller span{float:left;margin:0 10px;line-height:30px;font-size:30px;color:#ccc;}
.draw_controller .normal{border-radius:50%;}
.draw_controller .active{border-radius:50%;}
#view {
	position: absolute;
	z-index: 1;
	width: 300px;
	top: 430px;
	right: 0;
}
#view .am-btn {
	width: 135px;
}
.cf{display:block;zoom:1;}
* html .cf{height:1%;}
.cf:after{clear:both;display:block;visibility:hidden;height:0;content:" ";}
#draw{
	position: absolute;
	z-index: 1;
	width: 300px;
	top: 360px;
	right: 0;
}
.canvas_container { position: relative; width: 280px; background: url(../images/tiny_grid.png) repeat;}
.canvas_container canvas{ display: block; }
#file-selector {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 280px;
	height: 280px;
	outline: none;
	opacity: 0;
}
.color{position:absolute;z-index:111111;display:none;margin-left:1px;width:152px;height:auto;border:1px #bbb solid;border-bottom-right-radius:3px;border-bottom-left-radius:3px;background:#fff;font-size:14px;}
.color ul{padding:6px;}
.color li{display:inline-block;margin:6px 4px;width:34px;height:34px;list-style:none;}
.color li button{display:block;display:inline-block!important;padding:5px 0;padding:0!important;width:100%;width:100%;height:100%;border:2px solid #fff;border-radius:100%;box-shadow:0 0 4px #bbb;color:#333;text-decoration:none;font-size:12px;cursor:pointer;-webkit-transition:all .15s ease!important;-moz-transition:all .15s ease!important;-o-transition:all .15s ease!important;transition:all .15s ease!important;}
.line_size{position:absolute;z-index:999;z-index:111111;display:none;margin-left:1px;width:50px;border:1px #bbb solid;border-bottom-right-radius:3px;border-bottom-left-radius:3px;background:#fff;font-size:14px;}
.line_size li{list-style:none;}
.line_size li button{display:block;padding:5px 0;width:100%;border:0;background:0 0;color:#333;text-decoration:none;font-size:12px;cursor:pointer;-webkit-appearance:none;}
.line_size li button:hover{background:#f5f5f5;}
.line_size li span{display:inline-block;border-radius:100%;background:#000;vertical-align:middle;}
#showHistory{margin-top:20px;margin-bottom:100px;width:960px;height:auto;}
#showHistory h2{margin-bottom:20px;border-left:solid 4px #39c;text-align:left;text-indent:10px;font-weight:400;font-size:16px;font-family:"Microsoft Yahei";line-height:24px;}
.item{float:left;margin:10px 20px 10px 0;width:225px;}
.item img{width:225px;height:136px;border-color:#ccc;border-style:dashed;border-width:1px;}
.item a{display:inline-block;margin-top:10px;width:100px;color:#666;text-align:center;text-decoration:none;font-size:14px;font-family:"Microsoft Yahei";-webkit-transition:all .4s ease-in-out;}
.item a:hover{color:#39c;}
.item:nth-child(4n+1){margin-right:0;}
.tip{margin-top:8px;width:99%;height:24px;color:#999;text-align:right;font-size:14px;line-height:24px;}



/*add from wzh*/
.lines{display:inline-block;}
.lines li{display:inline-block;}
.lines li span{display:inline-block; background-color:#3db1f6; border-radius:50%; vertical-align:middle; margin-right:15px; cursor:pointer;}
.lines li span.selected{background-color:#dd514c;}
.lines li:nth-child(1) span{width:8px; height:8px;}
.lines li:nth-child(2) span{width:12px; height:12px;}
.lines li:nth-child(3) span{width:15px; height:15px;}
.draw_controller .pencil{background-position:0 0!important;}
.draw_controller .pencil.active, .draw_controller .pencil:hover{background-position:0 -30px!important;}
.draw_controller .handwriting{background-position:-30px 0!important;}
.draw_controller .handwriting.active, .draw_controller .handwriting:hover{background-position:-30px -30px!important;}
.draw_controller .rubber{background-position:-120px 0!important;}
.draw_controller .rubber.active, .draw_controller .rubber:hover{background-position:-120px -30px!important;}
.draw_controller .drawLine{background-position:-150px 0!important;}
.draw_controller .drawLine.active, .draw_controller .drawLine:hover{background-position:-150px -30px!important;}
.draw_controller .square{background-position:-180px 0!important;}
.draw_controller .square.active, .draw_controller .square:hover{background-position:-180px -30px!important;}
.draw_controller .circle{background-position:-210px 0!important;}
.draw_controller .circle.active, .draw_controller .circle:hover{background-position:-210px -30px!important;}
.draw_controller .cancel{background-position:-270px 0!important;}
.draw_controller .cancel.active, .draw_controller .cancel:hover{background-position:-270px -30px!important;}
.draw_controller .next{background-position:-300px 0!important;}
.draw_controller .next.active, .draw_controller .next:hover{background-position:-300px -30px!important;}
.draw_controller .clearContext{background-position:-330px 0!important;}
.draw_controller .clearContext.active, .draw_controller .clearContext:hover{background-position:-330px -30px!important;}
.draw_controller .save{background-position:-360px 0!important;}
.draw_controller .save.active, .draw_controller .save:hover{background-position:-360px -30px!important;}
.draw_controller .downloadImage{background-position:-390px 0!important;}
.draw_controller .downloadImage.active, .draw_controller .downloadImage:hover{background-position:-390px -30px!important;}